<template>
    <div class="page flex-col">
        <div class="group_1 flex-col">
            <div class="block_1 flex-row">
                <div></div>
                <div class="text-wrapper_13 flex-row">
                    <!-- <span class="text_21">切换二维码优先级：小程序&gt;安卓&gt;ios</span> -->
                </div>
            </div>
            <div class="block_1 flex-row">
                <div class="flex-row header_l">
                    <img class="label_1" referrerpolicy="no-referrer" src="@/assets/login_images/logo_l.png" />
                    <div class="block_2 flex-col justify-between">
                        <div class="text-wrapper_1">
                            <span class="text_1">BINIXIN&nbsp;</span>
                            <span class="text_2">LINK</span>
                        </div>
                        <span class="text_3">镔钢集团互联网运营中心</span>
                    </div>
                </div>
                <div class="flex-row menu_list header_r">
                    <div class="line_menu_item" v-for="(item, index) in menuList" :key="index"
                        @click="menuListRoute(item, index)">
                        <div class="line_menu_item_text" :class="item.actived ? 'line_menu_item_text_actived' : ''">
                            <span>{{ item.name }}</span>
                        </div>
                    </div>
                    <div class="block_3 flex-col">

                        <!-- <div class="image-wrapper_1 flex-col">

                            <div class="image-wrapper_2 flex-row">
                                <img class="thumbnail_2" referrerpolicy="no-referrer"
                                    src="@/assets/login_images/left_mini.png" />
                                <img class="image_1" referrerpolicy="no-referrer" src="@/assets/login_images/er_code.png" />
                                <img class="thumbnail_3" referrerpolicy="no-referrer"
                                    src="https://lanhu-oss.lanhuapp.com/SketchPng8d2027cd8af487a91a6dc4bd0e57810c8c29d6224abba0910bfdc74f91ab38c3" />
                            </div>

                            <div class="text-wrapper_14 flex-row">
                                <span class="text_22">小程序</span>
                            </div>
                        </div> -->
                        <div class="text-wrapper_6 flex-col">
                            <span class="text_12">APP移动端</span>
                        </div>

                    </div>

                </div>
            </div>
            <div class="block_1 flex-row">
                <div class="login_block">
                    <!-- 登录操作 -->
                    <div v-if="!setPwFlog" class="dl_block">
                        <div class="text-wrapper_15 flex-row justify-between">
                            <div class="text_13" :class="actived == 1 ? 'actived_bb' : ''" @click="switchLoginWay(1)">工号登录
                            </div>
                            <div class="text_13" :class="actived == 2 ? 'actived_bb' : ''" @click="switchLoginWay(2)">手机登录
                            </div>
                        </div>
                        <el-form v-if="actived == 1" ref="loginForm" :model="loginForm" :rules="loginRules"
                            autocomplete="off" class="login-form">

                            <div class="block_5 flex-row">
                                <img class="label_2" referrerpolicy="no-referrer" src="@/assets/login_images/people.png" />
                                <span class="text_15">工号</span>
                                <el-form-item prop="workNumber" style="margin-left: 0.5rem">
                                    <el-input autocomplete="off" v-model="loginForm.workNumber" type="text"
                                        auto-complete="off" placeholder="">
                                    </el-input>
                                </el-form-item>

                            </div>
                            <div class="block_6 flex-row">
                                <div class="group_4 flex-col"></div>
                            </div>
                            <div class="block_7 flex-row">
                                <img class="thumbnail_1" referrerpolicy="no-referrer"
                                    src="../../assets/login_images/key.png" />
                                <span class="text_16">密码</span>
                                <el-form-item prop="password" style="margin-left: 0.5rem">
                                    <el-input autocomplete="off" v-model="loginForm.password" type="password"
                                        auto-complete="off" placeholder="" show-password>

                                    </el-input>
                                </el-form-item>

                                <!-- <img class="label_3" referrerpolicy="no-referrer" src="@/assets/login_images/closeEye.png" /> -->
                            </div>
                            <div class="block_8 flex-row">
                                <div class="box_2 flex-col"></div>
                            </div>
                            <div class="text-wrapper_16">
                                <span class="text_17" @click="toSetPw">忘记密码？</span>
                            </div>
                        </el-form>
                        <el-form v-if="actived == 2" ref="telForm" :model="telForm" :rules="loginRules" class="login-form">

                            <div class="block_5 flex-row">
                                <img class="label_2" referrerpolicy="no-referrer" src="@/assets/login_images/people.png" />
                                <span class="text_15">手机号</span>
                                <el-form-item prop="phonenumber" class="ml20">
                                    <el-input v-model="telForm.phonenumber" type="text" auto-complete="off" placeholder="">

                                    </el-input>
                                </el-form-item>

                            </div>
                            <div class="block_6 flex-row">
                                <div class="group_4 flex-col"></div>
                            </div>
                            <div class="block_7 flex-row">
                                <img class="thumbnail_1" referrerpolicy="no-referrer"
                                    src="../../assets/login_images/key.png" />
                                <span class="text_16">验证码</span>
                                <el-form-item prop="smsCode" class="ml20">
                                    <el-input v-model="telForm.smsCode" type="password" auto-complete="off" placeholder="">

                                    </el-input>
                                </el-form-item>
                                <span class="text_yzm" @click="getMobileCode(1)">
                                    {{ getCodeSecond == 60 ? '获取验证码' : getCodeSecond + '秒后重新获取' }}

                                </span>
                                <!-- <img class="label_3" referrerpolicy="no-referrer" src="@/assets/login_images/closeEye.png" /> -->
                            </div>
                            <div class="block_8 flex-row">
                                <div class="box_2 flex-col"></div>
                            </div>

                        </el-form>
                        <div class="block_9 flex-row" @click="zhLoginWay">
                            <div class="text-wrapper_9 flex-col align-center">
                                <span class="text_18">{{ btText }}</span>
                            </div>
                        </div>
                    </div>
                    <!-- 设置密码 -->
                    <div v-if="setPwFlog" class="dl_block">
                        <div class="text-wrapper_15 flex-row justify-between">
                            <div class="text_13" :class="psActived == 1 ? 'actived_bb' : ''" @click="toBackSubmit">返回登录
                            </div>
                            <div class="text_13" v-if="psActived != 3" :class="psActived == 2 ? 'actived_bb' : ''"
                                @click="psActived = 2">找回密码</div>
                            <div class="text_13 actived_bb" v-if="psActived == 3">重置密码</div>

                        </div>
                        <el-form v-if="psActived == 1" ref="loginForm" :model="loginForm" :rules="loginRules"
                            class="login-form">

                            <div class="block_5 flex-row">
                                <img class="label_2" referrerpolicy="no-referrer" src="@/assets/login_images/people.png" />
                                <span class="text_15">工号</span>
                                <el-form-item prop="workNumber">
                                    <el-input v-model="loginForm.workNumber" type="text" auto-complete="off" placeholder="">

                                    </el-input>
                                </el-form-item>

                            </div>
                            <div class="block_6 flex-row">
                                <div class="group_4 flex-col"></div>
                            </div>
                            <div class="block_7 flex-row">
                                <img class="thumbnail_1" referrerpolicy="no-referrer"
                                    src="../../assets/login_images/key.png" />
                                <span class="text_16">密码</span>
                                <el-form-item prop="password">
                                    <el-input v-model="loginForm.password" type="password" auto-complete="off"
                                        placeholder="">

                                    </el-input>
                                </el-form-item>

                                <!-- <img class="label_3" referrerpolicy="no-referrer" src="@/assets/login_images/closeEye.png" /> -->
                            </div>
                            <div class="block_8 flex-row">
                                <div class="box_2 flex-col"></div>
                            </div>
                            <div class="text-wrapper_16">
                                <span class="text_17" @click="toSetPw">忘记密码？</span>
                            </div>
                        </el-form>
                        <el-form v-if="psActived == 2" ref="pwTelForm" :model="pwTelForm" :rules="loginRules"
                            class="login-form">

                            <div class="block_5 flex-row">
                                <img class="label_2" referrerpolicy="no-referrer" src="@/assets/login_images/people.png" />
                                <span class="text_15">手机号</span>
                                <el-form-item prop="phones" class="ml20">
                                    <el-input v-model="pwTelForm.phones" type="text" auto-complete="off" placeholder="">

                                    </el-input>
                                </el-form-item>

                            </div>
                            <div class="block_6 flex-row">
                                <div class="group_4 flex-col"></div>
                            </div>
                            <div class="block_7 flex-row">
                                <img class="thumbnail_1" referrerpolicy="no-referrer"
                                    src="../../assets/login_images/key.png" />
                                <span class="text_16">验证码</span>
                                <el-form-item prop="smsCode" class="ml20">
                                    <el-input v-model="pwTelForm.smsCode" type="password" auto-complete="off"
                                        placeholder="">

                                    </el-input>
                                </el-form-item>
                                <span class="text_yzm" @click="getPwMobileCode">
                                    {{ getCodeSecond == 60 ? '获取验证码' : getCodeSecond + '秒后重新获取' }}
                                </span>
                                <!-- <img class="label_3" referrerpolicy="no-referrer" src="@/assets/login_images/closeEye.png" /> -->
                            </div>
                            <div class="block_8 flex-row">
                                <div class="box_2 flex-col"></div>
                            </div>

                        </el-form>
                        <el-form v-if="psActived == 3" ref="setPwTelForm" :model="setPwTelForm" :rules="loginRules"
                            class="login-form">

                            <div class="block_5 flex-row">
                                <img class="label_2" referrerpolicy="no-referrer" src="@/assets/login_images/people.png" />
                                <span class="text_15">密码</span>
                                <div class="ml20">
                                    <el-form-item prop="password" class="">
                                        <el-input v-model="setPwTelForm.password" auto-complete="off" placeholder="请输入新密码"
                                            type="password" maxlength="20" show-password>

                                        </el-input>
                                    </el-form-item>
                                </div>


                            </div>
                            <div class="block_6 flex-row">
                                <div class="group_4 flex-col"></div>
                            </div>
                            <div class="block_7 flex-row">
                                <img class="thumbnail_1" referrerpolicy="no-referrer"
                                    src="../../assets/login_images/key.png" />
                                <span class="text_16">密码</span>
                                <el-form-item prop="confirmPassword" class="ml20">
                                    <el-input v-model="setPwTelForm.confirmPassword" auto-complete="off"
                                        placeholder="请再次输入新密码" type="password" maxlength="20" show-password>

                                    </el-input>
                                </el-form-item>

                                <!-- <img class="label_3" referrerpolicy="no-referrer" src="@/assets/login_images/closeEye.png" /> -->
                            </div>
                            <div class="block_8 flex-row">
                                <div class="box_2 flex-col"></div>
                            </div>

                        </el-form>
                        <div class="block_9 flex-row">
                            <div class="text-wrapper_9 flex-col align-center" @click="toSetpsWay(psActived)">
                                <span class="text_18">{{ psBtText }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="video-background">
            <video autoplay loop muted preload="auto">
                <!-- <source src="../../assets/video/20m_video.mp4" type="video/mp4"> -->
                <source :src="videoUrl" type="video/mp4">


                Your browser does not support the video tag.
            </video>
        </div>
    </div>
</template>
<script>
import { submitLogin, getCode, getUserByPho, resetUserPwd, sendCodeForResetPwd, isLoginBefore }
    from '@/api/user'
import { getNewToken } from '@/utils/auth'

export default {
    data() {

        const equalToPassword = (rule, value, callback) => {
            if (this.setPwTelForm.password !== value) {
                callback(new Error("两次输入的密码不一致"));
            } else {
                callback();
            }
        };
        return {

            videoUrl: 'http://118.178.239.31:9000/test/2024/09/20/单层20m.mp4',
            getCodeSecond: 60,
            setPwFlog: false,
            timerGetCode: null,
            btText: '登录',
            psBtText: '下一步',
            actived: 1,//登录框
            psActived: 2,//密码操作
            loginForm: {
                workNumber: "",//工号
                password: "",//密码
                code: "",//验证码
                uuid: ""
            },
            telForm: {
                phonenumber: "",
                smsCode: "",//短信code

            },
            menuList: [
                {
                    name: "Oms  销售",
                    path: 'http://x-s.bxgt.com:8081/Login/Index',
                    actived: false
                },
                {
                    name: "Tms  成品",
                    path: 'http://tms2.bxgt.com/tms-app/#/',
                    actived: false
                },
                {
                    name: "Les  地磅",
                    path: 'http://10.10.92.131/measure-app/',
                    actived: false
                },
                {
                    name: "Oa  协同",
                    path: 'http://oa.bxgt.com/',
                    actived: false
                },
                {
                    name: "Cisdi  工业互联网平台",
                    path: 'http://iip.bxgt.com/#/',
                    actived: false
                },
            ],
            // 找回密码手机验证：
            pwTelForm: {
                phones: "",
                smsCode: "",
                code: ""

            },// 找回密码手机验证：
            // 找回密码手机密码：
            setPwTelForm: {
                password: "",
                confirmPassword: "",
                userId: "",
            },

            loginRules: {
                workNumber: [
                    { required: true, trigger: "blur", message: "请输入您的工号" }
                ],
                password: [
                    { required: true, trigger: "blur", message: "请输入您的密码" },
                    { min: 6, max: 20, message: '用户密码长度必须介于 6 和 20 之间', trigger: 'blur' },
                    // {
                    //     pattern:/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*(),.?":{}|<>]|[^0-9a-zA-Z]).{6,20}$/,
                    //     message:'密码为6-20位数字、字母、符号任意两种组合',
                    //     trigger:'blur'
                    // }

                ],
                phonenumber: [
                    { required: true, trigger: "blur", message: "请输入您的手机号" },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                phones: [
                    { required: true, trigger: "blur", message: "请输入您的手机号" },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                smsCode: [{ required: true, trigger: "change", message: "请输入验证码" }],
                confirmPassword: [
                    { required: true, trigger: "blur", message: "请再次输入您的密码" },
                    { required: true, validator: equalToPassword, trigger: "blur" },
                    { min: 6, max: 20, message: '用户密码长度必须介于 6 和 20 之间', trigger: 'blur' },
                    // {
                    //     pattern:/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*(),.?":{}|<>]|[^0-9a-zA-Z]).{6,20}$/,
                    //     message:'密码为6-20位数字、字母、符号任意两种组合',
                    //     trigger:'blur'
                    // }
                ],
            },
        }
    },
    mounted() {
        this.videoInit()
    },
    methods: {
        menuListRoute(itm, i) {
            this.menuList.map(v => {
                v.actived = false
            })
            this.$set(this.menuList[i], 'actived', true)
            // window.AbortController
            var newWindow = window.open('', '_blank'); // 新开一个空白窗口
            if (newWindow) {
                newWindow.location.href = itm.path; // 在新窗口中跳转到指定的链接
            } else {
                this.$message.warning('窗口打开失败！')
            }
        },

        resetAllForm() {
            this.getCodeSecond = 60
            this.setPwFlog = false
            this.btText = '登录'
            this.psBtText = '下一步'
            this.actived = 1
            this.psActived = 2
            this.$refs['telForm'].resetFields()
            this.$refs['loginForm'].resetFields()
            this.$refs['pwTelForm'].resetFields()
            this.$refs['setPwTelForm'].resetFields()
            this.loginForm = this.$options.data().loginForm
            this.telForm = this.$options.data().telForm
            this.pwTelForm = this.$options.data().pwTelForm
            this.setPwTelForm = this.$options.data().setPwTelForm

        },
        // 重置登录信息
        resetTelForm() {
            this.$refs['telForm'].resetFields()
            this.telForm = this.$options.data().telForm


        },
        resetLoginForm() {
            this.$refs['loginForm'].resetFields()
            this.loginForm = this.$options.data().loginForm
        },
        // 
        resetpwTelForm() {
            this.$refs['pwTelForm'].resetFields()
            this.pwTelForm = this.$options.data().pwTelForm
        },
        resetSetpwTelForm() {
            this.$refs['setPwTelForm'].resetFields()
            this.setPwTelForm = this.$options.data().setPwTelForm
        },
        zhLoginWay() {
            if (this.actived == 1) {
                // 正常账号登录
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.$store.dispatch("user/LoginWay", this.loginForm).then(() => {
                            //调用之前登录做隐藏登录 使用账号
                            let obj = {
                                employee_no: this.loginForm.workNumber,
                                token: getNewToken()
                            }
                            this.$store.dispatch('user/login', obj).then(() => {
                                isLoginBefore().then(res => {
                                    this.$router.push({
                                        path: '/',
                                    });
                                    return
                                    if (!res) {

                                    } else {
                                        this.$router.push({
                                            path: '/',
                                        });
                                    }
                                })
                            })
                        }).catch(() => {
                        });
                    }
                })
            } else {
                // 手机验证码登录 smsLoginWay
                this.$refs.telForm.validate((valid) => {
                    if (valid) {
                        this.$store.dispatch("user/smsLoginWay", this.telForm).then(async () => {
                            const userInfoData = await this.$store.dispatch('user/getUserInfo')//融合平台权限信息
                            // console.log(userInfoData, 'userInfoData');
                            let obj = {
                                employee_no: userInfoData.user.workNumber,
                                token: getNewToken()
                            }
                            this.$store.dispatch('user/login', obj).then(() => {
                                this.$router.push({
                                    path: '/',
                                });
                            })
                        }).catch(() => {
                        });
                    }
                })
            }

        },
        // 切换登录
        switchLoginWay(val) {


            switch (val) {
                case 1:
                    this.resetTelForm()

                    break;

                default:
                    this.resetLoginForm()

                    break;
            }
            this.getCodeSecond = 60
            this.actived = val
        },
        // 设置密码
        toSetPw() {
            this.setPwFlog = true
        },
        //返回登录
        toBackSubmit() {
            this.setPwFlog = false
            this.actived = 1
            this.psActived = 2
            this.psBtText = '下一步'
            this.getCodeSecond = 60
            this.resetpwTelForm()
        },


        //获取修改密码的信息验证码操作
        getPwMobileCode() {
            if (this.pwTelForm.phones == null || this.pwTelForm.phones.length !== 11) {
                this.$message.warning(`手机号格式不正确`)
                return
            }
            let data = {
                phones: this.pwTelForm.phones,
                templateId: "SMS_223915122"
            }
            sendCodeForResetPwd(data).then(res => {
                this.$message.info('发送成功')
                this.pwTelForm.code = res.data.code
                this.setPwTelForm.userId = res.data.userId
                this.getCodeSecond--
                this.timerGetCode = setInterval(() => {
                    this.getCodeSecond--
                    if (this.getCodeSecond === 0) {
                        this.getCodeSecond = 60
                        clearInterval(this.timerGetCode)
                    }
                }, 1000)
            })
        },
        // 获取验证码
        getMobileCode(val) {
            if (this.getCodeSecond !== 60) {
                return
            }
            var data = null
            if (val == 1) {
                if (this.telForm.phonenumber == null || this.telForm.phonenumber.length !== 11) {
                    this.$message.warning(`手机号格式不正确`)
                    return
                }
                data = {
                    phones: this.telForm.phonenumber,
                    templateId: "SMS_223915122"
                }
            } else {
                if (this.pwTelForm.phones == null || this.pwTelForm.phones.length !== 11) {
                    this.$message.warning(`手机号格式不正确`)
                    return
                }
                data = {
                    phones: this.pwTelForm.phones,
                    templateId: "SMS_223915122"
                }
            }
            getCode(data).then(res => {
                this.$message.info('发送成功')
                this.getCodeSecond--
                this.timerGetCode = setInterval(() => {
                    this.getCodeSecond--
                    if (this.getCodeSecond === 0) {
                        this.getCodeSecond = 60
                        clearInterval(this.timerGetCode)
                    }
                }, 1000)
            })
        },
        toSetpsWay(val) {
            // 获取验证码之后操作
            if (val == 2) {

                // 通过手机号来获取要修改用户密码的对应用户信息
                // 
                this.$refs.pwTelForm.validate(valid => {
                    if (valid) {

                        if (this.pwTelForm.code == this.pwTelForm.smsCode) {
                            // 判断是否一致，一致为同一个账户

                            this.resetpwTelForm()
                            this.getCodeSecond = 60
                            this.psActived = 3
                            this.psBtText = '确定'
                        } else {

                            this.$message.warning(`验证码验证失败`)

                        }
                    }
                })

            } else {
                //重置密码操作
                // telForm
                this.$refs.setPwTelForm.validate(valid => {
                    if (valid) {
                        resetUserPwd(
                            {
                                userId: this.setPwTelForm.userId,
                                password: this.setPwTelForm.password
                            }
                        ).then(res => {
                            this.$message.success('修改成功')
                            this.resetAllForm()
                            // 修改后返回到登录
                        })
                    }
                })
            }
        },

        videoInit() {
            // 获取视频元素  
            var video = document.querySelector('.video-background video');

            // 设置播放速度（可选）  
            video.playbackRate = 1; // 正常速度  

        }
    }
}
</script>
<style scoped>
/* 1440  2560 */
.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.justify-start {
    display: flex;
    justify-content: flex-start;
}

.justify-center {
    display: flex;
    justify-content: center;
}

.justify-end {
    display: flex;
    justify-content: flex-end;
}

.justify-evenly {
    display: flex;
    justify-content: space-evenly;
}

.justify-around {
    display: flex;
    justify-content: space-around;
}

.justify-between {
    display: flex;
    justify-content: space-between;
}

.align-start {
    display: flex;
    align-items: flex-start;
}

.align-center {
    display: flex;
    align-items: center;
}

.align-end {
    display: flex;
    align-items: flex-end;
}

.video-background {
    position: fixed;
    /* 固定定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* 确保视频在内容下方 */
    overflow: hidden;
}

.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 居中显示 */
    /* min-width: 100%;
  min-height: 100%; */
    width: 100%;
    height: auto;
    object-fit: cover;
    /* 覆盖整个容器 */
}

.page {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.group_1 {
    width: 100%;
    height: 100%;
    /* display: flex; */
    align-items: center;
    /* background: url(./img/SketchPng86ba4ff5ad50e522098962b7057f932e9ced6f6a6aec919ccaeb19bd94607c95.png)
    100% no-repeat;
  background-size: 100% 100%; */

}

.text-wrapper_13 {

    /* float: right; */
    /* margin: 16px 0 0 1702px; */
    margin-top: 16px;

}

.text_21 {
    width: 204px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(255, 0, 0, 1);
    font-size: 12px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: right;
    white-space: nowrap;
    line-height: 16px;
}

.ml20 {
    margin-left: 20px;
}

.block_1 {
    width: 92%;
    /* width: 1826px; */
    /* height: 190px; */
    justify-content: space-between;
    padding: 5px 0 0 52px;
}

.label_1 {
    width: 43px;
    height: 43px;
    margin-top: 3px;
}

/* 登录 */


.dl_block {
    width: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 忘记密码操作 */
.block_2 {
    width: 177px;
    height: 42px;
    margin-left: 14px;
}

.text-wrapper_1 {
    width: 173px;
    height: 23px;
    overflow-wrap: break-word;
    font-size: 0;
    letter-spacing: -1.413782000541687px;
    font-family: Copperplate-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 27px;
}

.text_1 {
    width: 173px;
    height: 23px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 26px;
    font-family: Copperplate-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 27px;
}

.text_2 {
    width: 173px;
    height: 23px;
    overflow-wrap: break-word;
    color: rgba(44, 69, 254, 1);
    font-size: 26px;
    font-family: Copperplate-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 27px;
}

.text_3 {
    width: 173px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(197, 197, 197, 1);
    font-size: 12px;
    letter-spacing: 3.68571400642395px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 16px;
    margin: 3px 0 0 4px;
}

.text-wrapper_10 {
    width: 72px;
    height: 21px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin-top: 13px;
    /* margin: 13px 0 0 593px; */
}

.text_19 {
    width: 72px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(185, 185, 185, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 21px;
}

.text_yzm {
    cursor: pointer;
    width: 80px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(44, 69, 254, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    position: absolute;
    right: 0;
    /* margin: 1px 0 0 269px; */
}

.text_20 {
    width: 72px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(185, 185, 185, 1);
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 21px;
}

.text-wrapper_2 {
    width: 68px;
    height: 21px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 13px 0 0 89px;
}

@media screen and (max-width:1500px) {
    .header_l {

        width: 25%;
    }

    .header_r {

        width: 75%;
    }

    .login_block {
        width: 50%;
        /* padding-top: 50px; */

    }
}

@media screen and (min-width:1551px) {
    .header_l {

        width: 50%;
    }

    .header_r {

        width: 50%;
    }

    .login_block {
        width: 50%;
        padding-top: 100px;

    }
}




.menu_list {
    display: flex;
    justify-content: space-between;
}

.line_menu_item {
    cursor: pointer;
    /* width: 16.6%; */
    overflow-wrap: break-word;
    font-size: 0;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    /* text-align: left;  */
    /* text-align: center; */
    height: 43px;
    white-space: nowrap;
    display: flex;
    justify-content: baseline;
    align-items: center;
    /* line-height: 43px; */
}

.line_menu_item_text {

    overflow-wrap: break-word;
    color: rgba(185, 185, 185, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;

}

.line_menu_item_text_actived {
    color: rgba(255, 255, 255, 1);
}


.text_4 {
    width: 68px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(185, 185, 185, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 21px;
}

.text_5 {
    width: 68px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(185, 185, 185, 1);
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 21px;
}

.text-wrapper_3 {
    width: 61px;
    height: 21px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 13px 0 0 88px;
}

.text_6 {
    width: 61px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(185, 185, 185, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 21px;
}

.text_7 {
    width: 61px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(185, 185, 185, 1);
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 21px;
}

.text-wrapper_4 {
    width: 59px;
    height: 21px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 13px 0 0 89px;
}

.text_8 {
    width: 59px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(185, 185, 185, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 21px;
}

.text_9 {
    width: 59px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(185, 185, 185, 1);
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 21px;
}

.text-wrapper_5 {
    width: 144px;
    height: 21px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
    margin: 13px 0 0 87px;
}

.text_10 {
    width: 144px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(185, 185, 185, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 21px;
}

.text_11 {
    width: 144px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(185, 185, 185, 1);
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 21px;
}

.block_3 {
    position: relative;
    width: 148px;
    height: 188px;
    /* margin: 2px 0 0 94px; */
}

.image-wrapper_1 {
    background-color: rgba(26, 26, 27, 0.82);
    height: 152px;
    margin-top: 36px;
    width: 148px;
}

.image-wrapper_2 {
    width: 136px;
    height: 93px;
    margin: 27px 0 0 9px;
}

.thumbnail_2 {
    width: 13px;
    height: 13px;
    margin-top: 40px;
}

.image_1 {
    width: 94px;
    height: 93px;
    margin-left: 7px;
}

.thumbnail_3 {
    width: 13px;
    height: 13px;
    margin: 40px 0 0 9px;
}

.text-wrapper_14 {
    width: 36px;
    height: 16px;
    margin: 5px 0 11px 59px;
}

.text_22 {
    width: 36px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: right;
    white-space: nowrap;
    line-height: 16px;
}

.text-wrapper_6 {
    background-color: rgba(44, 69, 254, 1);
    border-radius: 4px;
    height: 43px;
    width: 148px;
    position: absolute;
    left: 0;
    top: 0;
}

.text_12 {
    width: 74px;
    height: 19px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    letter-spacing: 0.800000011920929px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 19px;
    margin: 13px 0 0 40px;
}

.text-wrapper_15 {
    width: 229px;
    height: 26px;
    /* margin: 116px 0 0 328px; */
}

.text_13 {
    cursor: pointer;
    height: 52px;
    overflow-wrap: break-word;
    color: rgba(197, 197, 197, 1);
    font-size: 20px;
    letter-spacing: 2.2156717777252197px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 26px;
    padding: 0 20px;
    /* border-bottom-width: 10px;
    border-bottom-color: aqua; */
}

.actived_bb {
    border-bottom: 1px rgba(44, 69, 254, 1) solid;
    color: rgba(44, 69, 254, 1);
}



.block_4 {
    width: 119px;
    height: 1px;
    margin-top: 12px;
}

.box_1 {
    background-color: rgba(44, 69, 254, 1);
    width: 119px;
    height: 1px;
}

.block_5 {
    /* width: 83px; */
    /* height: 26px; */
    /* margin: 101px 0 0 228px; */
    margin-top: 101px;
    width: 444px;
    height: 28px;
    display: flex;
    /* margin-top: 69px ; */
    /* margin-top: 9px; */
}

.label_2 {
    width: 23px;
    height: 23px;
    margin-top: 3px;
}

.text_15 {
    width: 36px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(197, 197, 197, 1);
    font-size: 18px;
    font-family: MicrosoftYaHeiLight;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 24px;
    margin-left: 28px;
}

.block_6 {
    width: 454px;
    height: 1px;
    margin-top: 9px;
}

.group_4 {
    width: 454px;
    height: 1px;
    border: 1px solid rgba(140, 140, 140, 1);
}

.block_7 {
    width: 444px;
    height: 28px;
    margin-top: 69px;
    position: relative;
}

.thumbnail_1 {
    width: 19px;
    height: 19px;
    margin-top: 5px;
}

.text_16 {
    width: 36px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(197, 197, 197, 1);
    font-size: 18px;
    font-family: MicrosoftYaHeiLight;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 24px;
    margin-left: 28px;
}

.label_3 {
    width: 24px;
    height: 24px;
    /* margin: 4px 0 0 337px; */
    margin-top: 4px;
    position: absolute;
    right: 0;
}

.block_8 {
    width: 454px;
    height: 1px;
    margin-top: 8px;
}

.box_2 {
    width: 454px;
    height: 1px;
    border: 1px solid rgba(140, 140, 140, 1);
}

.text-wrapper_16 {
    width: 454px;

    height: 21px;
    margin-top: 13px;
    display: flex;
    flex-direction: row-reverse;
}

.text_17 {
    cursor: pointer;
    width: 80px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(44, 69, 254, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 21px;
}

.block_9 {
    width: 454px;
    height: 69px;
    margin-top: 59px;
}

.text-wrapper_9 {
    cursor: pointer;
    background-color: rgba(44, 69, 254, 1);
    border-radius: 1px;
    height: 69px;
    width: 454px;
}

.text_18 {
    width: 47px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-family: MicrosoftYaHei;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 24px;
    margin-top: 22px;
}

/deep/ .el-form-item {
    width: 100%;
}

/deep/ .el-input {
    height: 28px;

    /* height: 100%; */
    /* padding-bottom: 22px; */
    margin-bottom: 12px;
}

/deep/ .el-form-item__content {
    line-height: 0%;
}

/* input框设置透明 */
/deep/ .el-input__inner {
    height: 28px;

    border: none;
    background-color: transparent !important;
    /* 设置为透明 */
    border-color: #ccc;
    /* text-align: center; */
    /* 可选，设置边框颜色 */


}

/* // 通过拉长过渡时间，和延迟过渡开始时间，掩盖input自动填充背景颜色 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    background-color: #f0f0f0 !important;
    /* 修改为你想要的颜色 */
    /* border: 1px solid #ddd; */
    /* -webkit-text-fill-color: #333; */
}

input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset !important;
}</style>